<template>
  <div class="login">
    <!--S登录-->
    <el-card class="login-container">
      <!--S标题-->
      <div slot="header" class="header">
        <span>登录</span>
      </div>
      <!--E标题-->
      <!--S登录表单-->
      <el-form ref="form" :model="formData" :rules="rules">
        <el-form-item prop="name">
          <el-input v-model="formData.name" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input v-model="formData.password" type="password" placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="medium" style="width: 100%;" @click="submit('form')">登录</el-button>
        </el-form-item>
      </el-form>
      <!--E登录表单-->
    </el-card>
    <!--E登录-->

    <!--S底部版权信息-->
    <copyright></copyright>
    <!--E底部版权信息-->
  </div>
</template>

<script>
import { setToken } from '../../utils/auth'
import Copyright from '@/components/Copyright/Index'
export default {
  name: 'Login',
  data() {
    return {
      formData: {
        name: '',
        password: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ]
      }
    }
  },
  components: {
    Copyright
  },
  methods: {
    /**
     * 提交登录
     * @param form
     */
    submit(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          this.$post('login', {
            name: this.formData.name,
            password: this.formData.password
          })
            .then((res) => {
              const { access_token } = res.data
              setToken(access_token)
              this.$router.push('/')
            })
            .catch((res) => {
              this.$handleError(res)
            })
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss">
.login{
  height: 100%;
  background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);
  background-size: cover;
  .login-container{
    position: absolute;
    left:50%;
    top:50%;
    transform: translate(-50%,-50%);
    width: 400px;
    height: 260px;
    .header{
      font-weight: bold;
    }
  }
}
</style>
